<template>
  <Tabs value="field" class="zl-editor-setting-tab">
    <TabPane :label="panel.label" :name="panel.name" :key="panel.name" v-for="panel in attrPanel">
      <component :is="panel.name" v-bind="[$props]"></component>
    </TabPane>
  </Tabs>
</template>

<script>
import emitter from '../../mixins/emitter.js'
import PanelField from './setting-panel/field';
import PanelForm from './setting-panel/form';
import PanelChart from './setting-panel/chart';
import PanelData from './setting-panel/data';
import { PANEL_DEFAULT } from '@/tools/constant';

export default {
  name: 'SettingPanel',
  components: {
    PanelField,
    PanelForm,
    PanelChart,
    PanelData
  },
  mixins: [emitter],
  props: {
    formProperty: {
      type: Object,
      default () {
        return {}
      }
    },
    setting: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      fieldProperty: {}
    }
  },
  computed: {
    attrPanel () {
    	return this.setting.attrPanel || PANEL_DEFAULT
    }
  },
  watch: {
    formProperty: {
      deep: true,
      handler (val) {
        this.dispatch('MainBoard', 'form-property-changed', [val])
      }
    }
  }
}
</script>
